<template>
  <div style="text-align: left">
    <new-code/>&nbsp;
    <el-input
      v-model="qq"
      style="width: 200px"
      placeholder="QQ号搜索"
      :prefix-icon="Search"
      @keypress.enter="loadSize();loadData()"
    />
  </div>
  <el-table lazy :data="codeData" style="width: 100%" v-loading="loading" empty-text="无数据">
    <el-table-column prop="codeId" label="入群码ID" width="80"/>
    <el-table-column prop="value" label="入群码" width="120"/>
    <el-table-column prop="status" label="使用状态" width="100" :formatter="convertStatus"/>
    <el-table-column prop="qq" label="使用者QQ" width="150"/>
    <el-table-column prop="inviterQq" label="邀请人QQ" width="150"/>
    <el-table-column prop="createTime" label="创建时间" width="170"/>
    <el-table-column prop="updateTime" label="更新时间" width="170"/>
    <el-table-column label="操作">
      <template #default="scope">
        <edit-code :data="scope.row"/>
        <show-info :testId="scope.row.testId"/>&nbsp;
        <el-button size="large" type="danger" @click="codeDelete(scope.row.codeId)">删除记录</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 10px;text-align: right">
    <el-pagination layout="prev, pager, next" :page-size="9" :total="pageSize"
                   @current-change="handleCurrentChange" v-model:current-page="currentPage"></el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'
import { codeList, codeSize, deleteCode } from '@/api/admin'
import EditCode from './code/EditCode.vue'
import NewCode from './code/NewCode.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ShowInfo from './test/ShowInfo.vue'
import { Search } from '@element-plus/icons-vue'

const convertStatus = (row: any, column: any, cellValue: any) => {
  switch (cellValue) {
    case 0:
      return '未使用'
    case 1:
      return '已使用'
    case 2:
      return '已销毁'
  }
}
const codeData = ref(null)
const reload: any = inject('reload')
const codeDelete = (codeId: number) => {
  ElMessageBox.confirm(
    '确认删除记录？',
    '确认删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    deleteCode(codeId).then(() => {
      ElMessage.success('删除成功')
      reload()
    })
  })
}
const pageSize = ref(0)
const currentPage = ref(1)
const qq = ref('')
const loading = ref(true)
const loadData = () => {
  loading.value = true
  codeList(currentPage.value, qq.value).then(resp => {
    codeData.value = resp.data.data
  }).finally(() => {
    loading.value = false
  })
}
const loadSize = () => {
  currentPage.value = 1
  codeSize(qq.value).then(resp => {
    pageSize.value = resp.data.data
  })
}
const handleCurrentChange = () => {
  loadData()
}
loadSize()
loadData()
</script>

<style scoped>

</style>
